<template>
    <div class="app-container">
        <div v-if="this.handleType=='edit'">
            <el-page-header @back="goBack" title="返回" style="font-size:20px ; font-weight: bold" content="商品编辑"></el-page-header>
        </div>
        <div v-else>
            <el-page-header @back="goBack" title="返回" style="font-size:20px ; font-weight: bold" content="商品详情"></el-page-header>
        </div>
        <el-divider></el-divider>
        <el-form ref="form" :model="form" label-width="80px" style="width:80%">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="商品编号">
                        <el-input v-model="form.goodsCode" readonly=true></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="所属主题">
                        <el-select v-model="form.themeId" filterable placeholder="请选择" style="width:60%">
                            <el-option
                                    v-for="item in themeInfo"
                                    :key="item.id"
                                    :label="item.themeName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品名称">
                        <el-input v-model="form.goodsName"/>
                    </el-form-item>
                </el-col>
             </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="销售价格(单件￥)">
                        <el-input v-model="form.price"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="成本价格(单件￥)">
                        <el-input v-model="form.costPrice"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="利润价格(单件￥)">
                        <el-input v-model="form.profitPrice"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="库存">
                        <el-input v-model="form.num"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="商品图">
                        预览地址
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.goodsRemark"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div v-if="this.handleType == 'edit'">
            <el-row :gutter="20">
                <el-col :span="8">
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" style="margin-left: 10px;" @click="GoodsSubmit()">确认修改</el-button>
                    <el-button @click="GoodsCancle()" style="margin-left: 10px;" >取消修改</el-button>
                </el-col>
                <el-col :span="8">
                </el-col>
            </el-row>
            </div>
        </el-form>
    </div>

</template>


<script>
    import request from "../../utils/request";
    import {ElMessage} from "element-plus";

    export default {
        name: "GoodsEdit",
        data(){
            return{
                form:{},
                handleType:'',
                themeInfo:[]
            }
        },
        created(){
            this.goodsDetailInfo();
           // this.GoodsCodeAdd();
            this.getAllThemeInfo();
        },
        methods:{
            getAllThemeInfo(){
                request.get("/api/theme/getAllThemeInfo").then(resp=>{
                    if(resp.status == 'M0200'){
                        this.themeInfo=resp.data
                    }else{
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                })
            },
            goBack(){
                this.$router.push('/goodsManager')
            },
            GoodsCancle(){
                this.$router.push('/goodsManager')
            },
            GoodsCodeAdd(){
                request.get("/api/user/getBH",{
                    params:{
                        prefix:"GD"
                    }
                }).then(resp=>{
                    if(resp.status == 'M0200'){
                        this.form.goodsCode=resp.data
                    }else{
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                })
            },
            GoodsSubmit(){
                request.post("/api/goods/updateGoodsInfo",this.form).then(res=>{
                    if(res.status =='M0200'){
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"success"
                        })
                    }else{
                        ElMessage({
                            message:"添加失败:"+res.msg,
                            type:"error"
                        })
                    }
                })
            },
            goodsDetailInfo(){
                // 取到路由带过来的参数
                const routerParams = this.$route.query.id;
                const handleType=this.$route.query.type;
                // 将数据放在当前组件的数据内
                //this.mallInfo.searchMap.mallCode = routerParams;
                //this.keyupMallName()
                this.handleType=handleType;

                request.get("/api/goods/getGoodsDetail",{
                    params:{
                        id:routerParams
                    }
                }).then(resp=>{
                    if(resp.status=='M0200'){
                        this.form=resp.data
                    }
                })
            },
            watch: {
                '$route': 'goodsDetailInfo'
            }
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
    }
</style>
